﻿@model Sysgeprava.Entities.TRABAJADOR

@{
    ViewBag.Title = "NUEVO";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="@Url.Content("~/Content/desing.css")" rel="stylesheet" />

@{
    var message = TempData["AlertMessage"] ?? string.Empty;
}

<script type="text/javascript">
    var message = '@message';
    if (message) {
        alert(message).alert;
    }
</script>

<div class="float-center" id="panel_titulo">
   <img src="~/Images/titulos/mttoTrabajador.png" alt="mttoTrabajador" height="70" width="400"/>
</div>


<h2></h2>

@using (Html.BeginForm("Create", "Trabajador", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>TRABAJADOR</legend>

    <div id="general">

        <div style="float:right; margin-right:250px; border:solid;">
                <output id="list"></output>
        </div>

        <b>DNI: </b>
        <div class="editor-field">
            @Html.Editor("Dni")
            @Html.ValidationMessageFor(model => model.Dni)
        </div>

        <b>Apellido Paterno: </b>
        <div class="editor-field">
            @Html.EditorFor(model => model.ApePaterno)
            @Html.ValidationMessageFor(model => model.ApePaterno)
        </div>

        <b>Apellido Materno: </b>
        <div class="editor-field">
            @Html.EditorFor(model => model.ApeMaterno)
            @Html.ValidationMessageFor(model => model.ApeMaterno)
        </div>

        <b>Nombres: </b>
        <div class="editor-field">
            @Html.EditorFor(model => model.Nombre)
            @Html.ValidationMessageFor(model => model.Nombre)
        </div>

        <b>Dirección: </b>
        <div class="editor-field">
            @Html.EditorFor(model => model.Direccion)
            @Html.ValidationMessageFor(model => model.Direccion)
        </div>

        <b>Teléfonos: </b>
        <div class="editor-field">
            @Html.EditorFor(model => model.Telefono)
            @Html.ValidationMessageFor(model => model.Telefono)
        </div>

        <b>Foto Trabajador</b>
        <div class="editor-field">
            <input type="file" title="Seleccione foto" name="image" id="files" accept=".jpg, .png"/>
        </div>
        
    </div>
            
        <p>
            <button type="submit" name="btnGuardar" id="btnGuardar" value="Create"><img src="~/Images/botones/save.png"></button>
            <button onclick="location.href='@Url.Action("Index")';return false;" ><img src="~/Images/botones/return.png"></button>
        </p>
    </fieldset>
}

@*<div>
    @Html.ActionLink("Back to List", "Index")
</div>*@

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">

        $("#Dni").focusout(function () {

            var dni = $(this).val();

            var IdTrabajador = $("#Id").val();

            var div = $(this).closest("div");

            if (dni.length == 8) {
                $.ajax({
                    url: "/Trabajador/ValidarDni?dni=" + dni + "&id=" + IdTrabajador,
                    dataType: "json",
                    success: function (data) {
                        if (data.existe == true) {
                            $(div).find("spam").remove();
                            alert("Trabajador ya se encuentra Registrado");
                            $(div).append('<spam class="field-validation-error"><br/>Trabajador: ' + data.nomTrabajador + '</spam>');
                            $("#btnGuardar").hide();
                            $("#Dni").focus();
                        }
                        else {
                            $(div).find("spam").remove();
                            $("#btnGuardar").show();
                        }
                    }
                });
            }
            else {
                alert("Longitud de DNI INCORRECTA");
                $("#Dni").focus();
            }
        });

        /*-----obtener url y mostrar vista previa de la imagen-------*/
        
        function archivo(evt) {
            var files = evt.target.files; // FileList object

            // Obtenemos la imagen del campo "file".
            for (var i = 0, f; f = files[i]; i++) {
                //Solo admitimos imágenes.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                reader.onload = (function (theFile) {
                    return function (e) {
                        // Insertamos la imagen
                        document.getElementById("list").innerHTML = ['<img class="thumb" width="250" height="250" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                    };
                })(f);

                reader.readAsDataURL(f);
            }
        }

        document.getElementById('files').addEventListener('change', archivo, false);

        /*-----------------------------------------------------------------------------------------------------------------------------*/

    </script>
}
